<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('销账')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-cancel-add" >
        <input id="incomingId" name="incomingId" th:value="${incomingId}" type="hidden">
        <input id="expenses" name="params[expenses]" type="hidden">
        <input id="taxs" name="params[taxs]" type="hidden">
        <input id="invoices" name="params[invoices]" type="hidden">
        <input id="papers" name="params[papers]" type="hidden" th:value="${papers}">
    </form>

    <div class="row">
        <div class="col-sm-12  table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
    <div class="row">
        <button type="button" class="btn btn-primary" onclick="selectExpense(2)">添加返款单</button>
        <div class="col-sm-12 table-striped">
            <table id="backpay-table"></table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 table-striped">
            <table id="off-table"></table>
        </div>
    </div>
    <div class="row">
        <form id="paperSearch">
            <div class="select-list">
                <ul>
                    <li>
                        <label>稿件名称：</label>
                        <input type="text" name="paperName"/>
                    </li>
                    <li>
                        <label>客户名称：</label>
                        <input type="text" name="customerName"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="commonSearch();"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$('#paperSearch')[0].reset()"><i
                                class="fa fa-refresh"></i>&nbsp;重置</a>
                        <a class="btn btn-success btn-sm" onclick="insertRow()"><i class="fa fa-plus"></i> 批量选择</a>
                        <a class="btn btn-success btn-sm" onclick="removeRows()"><i class="fa fa-plus"></i> 批量撤销</a>

                    </li>
                </ul>
            </div>
        </form>
        <div class="col-sm-12 table-striped">
            <table id="paper-table"></table>
        </div>
    </div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var bankNoDatas = [[${@dict.getType('work_bank')}]];
    var expenseTypeDatas = [[${@dict.getType('work_expense')}]];
    var expenseStatusDatas = [[${@dict.getType('work_check_status')}]];
    var payTypeDatas = [[${@dict.getType('work_out_type')}]];
    var paperTypeDatas = [[${@dict.getType('work_paper_type')}]];
    var paperStatusDatas = [[${@dict.getType('work_paper_status')}]];
    var prefix = ctx + "work/incoming"
    $("#form-incoming-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {

            var papers = $("#off-table").bootstrapTable('getData');

            $("#papers").val(papers.map(e => e.paperId));
            var backpay = $("#backpay-table").bootstrapTable('getData');
            $("#expenses").val(backpay.map(e => e.expenseId));

            $.operate.save(prefix + "/addcancel/1", $('#form-cancel-add').serialize());
        }
    }

    $("input[name='incomingDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.paperName = $("#paperSearch [name='paperName']").val();
        search.customerName = $("#paperSearch [name='customerName']").val();
        return search;
    }
    function commonSearch() {

        var options2 = {
            url: ctx + "work/paper/cancel/"+$("#incomingId").val()+"/0",
            id: "paper-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: true,
            method: 'post',
            sidePagination: "server",
            contentType: "application/x-www-form-urlencoded",
            unique: "paperId",
            queryParams: queryParams,
            columns: [
                {
                    checkbox:true,

                },
                {
                    field: 'paperId',
                    title: '稿件ID'
                },
                {
                    field: 'paperType',
                    title: '稿件类型',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(paperTypeDatas, value);
                    }
                },
                {
                    field: 'paperName',
                    title: '稿件名称'
                },
                {
                    field: 'belong',
                    title: '稿件所属',
                    width: 80
                },
                {
                    field: 'customerName',
                    title: '客户名称'
                },

                {
                    field: 'mediaName',
                    title: '媒体名称'
                },
                {
                    field: 'paperPrice',
                    title: '计划总价'
                },
                {
                    field: 'actualPrice',
                    title: '实际总价'
                }
            ]
        };
        $.table.destroy('paper-table');
        $.table.init(options2);
    }

    $(function () {
        var options = {
            url: prefix + "/cancellist/" + $("#incomingId").val(),
            id: "bootstrap-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            columns: [
                [{
                    title: '你选择的收款认领信息',
                    align: 'left',
                    colspan: 10
                }
                ],
                [
                    {
                        field: 'incomingId',
                        title: '认领ID',
                        visible: false
                    },
                    {
                        field: 'incomingName',
                        title: '来款人'
                    },
                    {
                        field: 'bankName',
                        title: '来款银行',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(bankNoDatas, value);
                        }
                    },
                    {
                        field: 'bankAccount',
                        title: '来款账号'
                    },
                    {
                        field: 'money',
                        title: '来款额度'
                    },
                    {
                        field: 'refund',
                        title: '返款金额'
                    },
                    {
                        field: 'taxes',
                        title: '税金'
                    },
                    {
                        field: 'expenseLimit',
                        title: '已销额度'
                    },
                    {
                        field: 'incomingDate',
                        title: '来款日期'
                    },
                    {
                        field: 'remark',
                        title: '备注'
                    }]]
        };
        $.table.init(options);
        var options1 = {
            url: ctx + "work/expense/backpay/" + $("#incomingId").val(),
            id: "backpay-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            unique: "expenseId",
            columns: [
                [{
                    title: "关联的返款单",
                    align: "left",
                    colspan: 10
                }
                ],
                [
                    {
                        field: 'expenseId',
                        title: '报销ID'
                    },
                    {
                        field: 'expenseType',
                        title: '报销类型',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(expenseTypeDatas, value);
                        }
                    },
                    {
                        field: 'expenseFee',
                        title: '报销费用'
                    },
                    {
                        field: 'expenseStatus',
                        title: '审核状态',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(expenseStatusDatas, value);
                        }
                    },
                    {
                        field: 'payType',
                        title: '支出类型',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(payTypeDatas, value);
                        }
                    },
                    {
                        field: 'bankName',
                        title: '银行名称',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(bankNoDatas, value);
                        }
                    },
                    {
                        field: 'bankAccount',
                        title: '银行账号'
                    },

                    {
                        field: 'expenser',
                        title: '报销人'
                    },

                    {
                        field: 'remark',
                        title: '报销内容概要'
                    },{
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="removeRow(\'expenseId\',\'' + row.expenseId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            ]
        };
        $.table.init(options1);
        var options2 = {
            url: ctx + "work/paper/off/" + $("#incomingId").val(),
            id: "off-table",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: true,
            unique: "paperId",
            footerStyle: footerStyle,
            columns: [
                [{
                    title: "要销账的稿件",
                    align: "left",
                    colspan: 9
                }],
                [{
                    checkbox: true
                },{
                    field: 'paperId',
                    title: '稿件ID',
                    align: 'center',
                    footerFormatter: function (value) {
                        return "合计：";
                    }
                },
                    {
                        field: 'paperStatus',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(paperStatusDatas, value);
                        }

                    },
                    {
                        field: 'paperType',
                        title: '稿件类型',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(paperTypeDatas, value);
                        }

                    },
                    {
                        field: 'paperName',
                        title: '稿件名称',
                        align: 'center'

                    },

                    {
                        field: 'customerName',
                        title: '客户名称',
                        align: 'center'

                    },
                    {
                        field: 'mediaName',
                        title: '媒体名称',
                        align: 'center'
                    },{
                    field: 'actualCost',
                    title: '实际成本',

                    align: 'center',
                    footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].actualCost);
                        }
                        return sumBalance;
                    }
                },{
                    field: 'actualPrice',
                    title: '实际总价',
                    footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].actualPrice);
                        }
                        return sumBalance;
                    },
                    align: 'center'
                }]]
        };
        $.table.init(options2);

        commonSearch();


    });
    function footerStyle(column) {
        return {
            actualPrice: {
                css: {color: 'red', 'font-weight': 'normal'}
            },
            actualCost: {
                css: {color: 'red', 'font-weight': 'normal'}
            }, cost: {
                css: {color: 'red', 'font-weight': 'normal'}
            }, paperPrice: {
                css: {color: 'red', 'font-weight': 'normal'}
            },
        }[column.field]
    }
    function removeRow(field,id) {
        table.set();

        $('#'+table.options.id).bootstrapTable('remove', {
            field: field,
            values: id
        })

    }
    // callBack获取父窗口方法（方式二）
    function selectExpense(exType) {

        var options = {
            title: exType == '2' ? '选择返款单' : "选择税金报销单",
            url: prefix + "/expense/" + exType,
            width: 1200,
            callBack: exType == '2' ? submitBack : submitTax
        };
        $.modal.openOptions(options);
    }

    function submitBack(index, layero) {
        var rows = layero.find("iframe")[0].contentWindow.getSelections();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $("#backpay-table").bootstrapTable('append', rows);
        $.modal.close(index);
    }

    /* 新增表格行 */
    function insertRow() {


        var row = $("#paper-table").bootstrapTable('getSelections');

        //(new Date().getTime() + Math.floor(Math.random() * Math.pow(10, 15))).toString(36),
        $(row).each(function (i,r) {

            if ($("#off-table").bootstrapTable('getRowByUniqueId', r.paperId) == null)
                $("#off-table").bootstrapTable('append', r);

        })


    }

    function removeRows() {

        //var ids = $.table.selectColumns("id");

        var row = $("#off-table").bootstrapTable('getSelections');
        if (row.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        var ids = $.map(row, function (r) {
            return $.common.getItemField(r, "paperId");
        });
        $("#off-table").bootstrapTable('remove', {
            field: 'paperId',
            values: ids
        })

    }


</script>
</body>
</html>